<template>
	<view class="form-container">
		<view class="title">
			为了更好的为您服务，请您务必填写真实信息
		</view>
		<view class="form">
			<u-form :model="model" :rules="rules" ref="form">
				<u-form-item label-width="150rpx" prop="userInfo.name" borderBottom ref="item1">
					<template #label>
						<span class="red-star" style="color: red;">*</span> 收款人
					</template>
					<u-input placeholder="请输入收款人" v-model="model.userInfo.name" border="none"></u-input>
				</u-form-item>
				<u-form-item label-width="150rpx" prop="userInfo.bank" borderBottom ref="item2">
					<template #label>
						<span class="red-star" style="color: red;">*</span> 开户银行
					</template>
					<u-input placeholder="请输入开户银行" v-model="model.userInfo.bank" border="none"></u-input>
				</u-form-item>
				<u-form-item label-width="150rpx" prop="userInfo.cardNumber" borderBottom ref="item3">
					<template #label>
						<span class="red-star" style="color: red;">*</span>银行卡号
					</template>
					<u-input placeholder="请输入银行卡号" v-model="model.userInfo.cardNumber" border="none"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="submit-button" @click="onSubmit">提交</view>
	</view>
</template>
<script>
	import {
		sendBank,
		getBank
	} from '@/config/api.js'
	export default {
		data() {
			return {
				model: {
					userInfo: {
						name: '',
						bank: '',
						cardNumber: ''
					}
				},
				rules: {
					'userInfo.name': [{
						required: true,
						message: '收款人是必填项',
						trigger: 'blur'
					}],
					'userInfo.bank': [{
						required: true,
						message: '开户银行是必填项',
						trigger: 'blur'
					}],
					'userInfo.cardNumber': [{
						required: true,
						message: '银行卡号是必填项',
						trigger: 'blur'
					}]
				},
				bankid: null
			};
		},
		methods: {
			onSubmit() {
				console.log()
				// this.$refs.form.validate((valid) => {
				// 	if (valid) {
				// 		// 表单验证成功，执行提交操作
				// 		console.log('提交成功', this.model);
				// 	} else {
				// 		console.log('表单验证失败');
				// 		return false;
				// 	}
				// });
				this.$refs.form.validate().then(res => {

					sendBank({
						card_name: this.model.userInfo.name,
						card_bank: this.model.userInfo.bank,
						card_number: this.model.userInfo.cardNumber,
						id: this.model.bankid
					}).then(data => {
						uni.showToast({
							title: '银行卡绑定成功',
							icon: 'success',
							duration: 2000
						});


					})
				}).catch(errors => {
					uni.showToast({
						title: '绑定失败，请重试',
						icon: 'error',
						duration: 2000
					});
					return false
				})
			}
		},
		mounted() {
			getBank().then(data => {
				if (data[0]) {
					this.model.userInfo.name = data[0].card_name
					this.model.userInfo.cardNumber = data[0].card_number
					this.model.userInfo.bank = data[0].card_bank
					this.model.bankid = data[0].id
				}
			})
		}
	};
</script>
<style scoped lang="scss">
	@import 'Bank.scss';

	.form {

		padding: 0 20rpx;

	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		background-color: #ffebeb;
		color: red;
		padding: 0 20rpx;
	}


	.submit-button {
		background-color: #9b742f;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		width: 90%;
		margin: 0 auto;
		position: fixed;
		bottom: 20px;
		/* 距离底部的距离 */
		left: 50%;
		/* 水平居中 */
		transform: translateX(-50%);
		/* 调整以实现完全居中 */
	}
</style>